<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="http://minedata.cn/minemapapi/v1.2/minemap.css">
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
        }

        html,
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <button id="del">删除</button>
    <script src="http://minedata.cn/minemapapi/v1.2/minemap.js"></script>
    <script>
        /**
     * 基本地图加载
     * 地图缩放级别限制
     */
        minemap.accessToken = 'e919a6f32ce242f5aec22652d9dc1fdb';
        minemap.solution =2147;
        var map = new minemap.Map({
            container: 'map',
            style: "http://minedata.cn/service/solu/style/id/2147",
            center: [116.46, 39.92],
            zoom: 16,
            // pitch: 60,
            minZoom: 20,    //地图最大缩放级别限制
            minZoom: 1,     //地图最小缩放级别限制
        });
        //添加地图标注
        // var el = document.createElement("div")
        // el.id = "marker"
        // el.style.backgroundImage = "url(\'五角星-实.png'\)"
        // el.style.backgroundSize = "cover"
        // el.style.width = "30px"
        // el.style.height = "30px"
        // el.style.cursor = "pointer"
        // el.addEventListener = ("contextmenu", function(){
        //     marker.remove()
        // })
        //添加标注
        // var marker = new minemap.Marker(el,{offset:[-100,-15]})
        //                 .setLngLat([116.46,39.92])
        //                 .addTo(map)

        //添加临时标注
        // var tempMarker = null
        var lngLat = [116.46,39.92]
        var el = document.createElement("div")
        el.className="marker"
        el.style.backgroundImage = "url(\'五角星-实.png'\)"
        el.style.backgroundSize = "cover"
        el.style.width = "30px"
        el.style.height = "30px"
        el.style.cursor = "pointer"
        el.addEventListener("contextmenu",function(){
            tempMarker.remove()
        })
        var tempMarker = new minemap.Marker(el,{offset:[-25,-25]})
        .setLngLat(lngLat)
        .addTo(map)
        

        
    </script>
</body>

</html>